import React, { Component } from 'react';
import {
  StyleSheet, View, Dimensions, Text,
} from 'react-native';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.contain}>
        <View style={styles.childView}>
          <Text>MarginHorizontal</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  contain: {
    backgroundColor: 'yellow',
    flex: 1,
  },
  childView: {
    marginHorizontal: 20, // 相同于同时设置marginLeft和marginRight
    // marginVertical相同于同时设置marginTop和marginBottom
    // paddingHorizontal相同于同时设置paddingLeft和paddingRight
    // paddingVertical相同于同时设置paddingTop和paddingBottom
    backgroundColor: 'green',
    height: 200,
    width: Dimensions.get('window').width - 40,
  },
});
export default MyComponent;
